<!--
 * @Date: 2025-07-29 21:08:48
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-07-29 22:44:28
 * @FilePath: /admin-vue/src/components/button-icon.vue
-->
<script setup lang="ts">
import type { PopoverPlacement } from 'naive-ui'
import { twMerge } from 'tailwind-merge'

defineOptions({
  name: 'ButtonIcon',
  inheritAttrs: false,
})

interface Props {
  /** Button class */
  class?: string
  /** Iconify icon name */
  icon?: string
  /** Tooltip content */
  tooltipContent?: string
  /** Tooltip placement */
  tooltipPlacement?: PopoverPlacement
  zIndex?: number
}

const props = withDefaults(defineProps<Props>(), {
  class: '',
  icon: '',
  tooltipContent: '',
  tooltipPlacement: 'bottom',
  zIndex: 98,
})

const DEFAULT_CLASS = '  text-lg!'
</script>

<template>
  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
    <template #trigger>
      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
        <div class="flex items-center justify-center gap-2">
          <slot>
            <SvgIcon :icon="icon" />
          </slot>
        </div>
      </NButton>
    </template>
    {{ tooltipContent }}
  </NTooltip>
</template>

<style scoped></style>
